ওয়েবে নতুন কি

সেভ করা পৃষ্ঠা গুছিয়ে রাখতে 'সংগ্রহ' ব্যবহার করুন আপনার পছন্দ অনুযায়ী কন্টেন্ট সেভ করুন ও সঠিক বিভাগে রাখুন।

Rachel Andrew

প্রকাশিত: 20 মে, 2025

Google I/O 2025-এ ওয়েব কীনোটে নতুন কী আছে সমস্ত বেসলাইন ঘোষণা শেয়ার করা হয়েছে, সেই সাথে এই বছর বেসলাইনের অংশ হয়ে উঠেছে এমন কিছু বৈশিষ্ট্যের দিকে নজর দেওয়া হয়েছে। এটি ওয়েবের জন্য একটি আশ্চর্যজনক বছর হয়েছে, এবং বেসলাইনের জন্য, এই পোস্টটি আরও জানার জন্য সমস্ত লিঙ্ক সহ উল্লেখ করা সমস্ত কিছুর একটি রাউন্ডআপ।

ওয়েব প্ল্যাটফর্ম ড্যাশবোর্ড এবং ওয়েব বৈশিষ্ট্য

2024 সালে আমরা ওয়েব প্ল্যাটফর্ম ড্যাশবোর্ডের প্রাথমিক লঞ্চ ঘোষণা করেছি, যা ওয়েব-বৈশিষ্ট্য ডেটা সেট ব্যবহার করে, আপনাকে বেসলাইনের অংশ সমস্ত বৈশিষ্ট্যগুলি অন্বেষণ করার অনুমতি দেয়৷

প্ল্যাটফর্মের ম্যাপ করা সমস্ত বৈশিষ্ট্য সহ ওয়েব-ফিচার ডেটা এখন সম্পূর্ণ। নতুন বৈশিষ্ট্যগুলি প্রতি মাসে বেসলাইনে যোগ দেওয়ার সাথে সাথে ডেটা আপডেট করা হয় এবং এই সমস্ত ড্যাশবোর্ডে প্রকাশ করা হয়।

আপনার নিজের বেসলাইন টার্গেট আবিষ্কার করতে সাহায্য করার জন্য টুল

যদিও আপনি আপনার ব্রাউজার সমর্থন নীতিকে বেসলাইন ওয়াইডলি উপলভ্য-এর চলমান লক্ষ্যের উপর ভিত্তি করে তৈরি করতে পারেন — যেমন ইউকে এজেন্সি ক্লিয়ারলেফ্ট — আপনি একটি বেসলাইন বছরের উপর ভিত্তি করে একটি নির্দিষ্ট লক্ষ্যও গ্রহণ করতে পারেন। আপনি এখন আপনার জন্য সেরা টার্গেট তৈরি করতে ওয়েব-ফিচার ডেটা সহ আপনার নিজের ব্যবহারকারীর ডেটা ব্যবহার করতে পারেন৷

গত বছর I/O তে আমরা ঘোষণা করেছি যে RUMvision তাদের পণ্যে বেসলাইন বাস্তবায়ন করবে, এবং এই ইন্টিগ্রেশন এখন লাইভ।

যেহেতু এটি আপনার RUM ডেটা ব্যবহার করে, এটি আপনাকে বৈশ্বিক গড়ের পরিবর্তে সেই ডেটার উপর ভিত্তি করে কোন বেসলাইন বছর গ্রহণ করতে হবে তা সনাক্ত করতে সহায়তা করে৷ এটি আপনাকে বেসলাইন ওয়াইডলি উপলব্ধ আপনার জন্য অর্থপূর্ণ কিনা তা দেখতেও সাহায্য করতে পারে।

নতুন Google অ্যানালিটিক্স বেসলাইন পরীক্ষকের সাথে প্রতিটি বেসলাইন লক্ষ্যকে আপনার ব্যবহারকারীদের কত শতাংশ সমর্থন করে তা স্পষ্টভাবে দেখতে আপনি আপনার Google Analytics ডেটা ব্যবহার করতে পারেন।

এই দুটি টুলের একটি ক্রমবর্ধমান সংগ্রহ যা আপনাকে আপনার প্রকৃত ব্যবহারকারীর ডেটা বেসলাইনে ম্যাপ করতে সাহায্য করে।

ওয়েব ডিএক্স কমিউনিটি গ্রুপ সম্প্রতি Netlify-এর জন্য একটি এক্সটেনশন চালু করেছে যা বিভিন্ন বেসলাইন বছরের জন্য সমর্থন দেখায় এবং আপনার বিল্ড টুলগুলিতে কী টার্গেট করতে হবে তা সিদ্ধান্ত নিতে সাহায্য করার জন্য আপনার সাইটগুলিতে ব্যাপকভাবে উপলব্ধ। ক্লাউডফ্লেয়ারের অবজারভেটরি RUM প্রোডাক্ট এবং কনটেন্টস্কয়ারের সাথে শীঘ্রই একীভূত হচ্ছে।

আপনার নিজস্ব সরঞ্জামগুলির সাথে ডেটা সংহত করুন

ওয়েব-বৈশিষ্ট্যের ডেটা আপনার নিজস্ব একীকরণের জন্য উন্মুক্ত এবং উপলব্ধ। আমরা এটি সহজ করার চেষ্টা করছি।

ওয়েব প্ল্যাটফর্ম ড্যাশবোর্ড API ব্যবহার করুন, অথবা সরাসরি npm প্যাকেজ থেকে ওয়েব-বৈশিষ্ট্য ডেটা ব্যবহার করুন।

আপনি এখন W3C WebDX কমিউনিটি গ্রুপ থেকে বেসলাইন-ব্রাউজার-ম্যাপিং মডিউল ব্যবহার করে একটি বেসলাইন লক্ষ্যে ব্রাউজার সংস্করণ ম্যাপ করতে পারেন। এই মডিউলটি হয় সার্ভার-সাইড জাভাস্ক্রিপ্ট পরিবেশে ব্যবহার করা যেতে পারে, অথবা JSON বা CSV ফাইলগুলি ডাউনলোড করে যা সংগ্রহস্থল থেকে প্রতিদিন রিফ্রেশ হয়।

এই ডেটাতে শুধুমাত্র মূল বেসলাইন ব্রাউজার সেটের জন্য নয়, স্যামসাং ইন্টারনেট, অপেরা, ইউসি ব্রাউজার এবং অ্যান্ড্রয়েড ওয়েবভিউ-এর মতো ডাউনস্ট্রিম ব্রাউজারগুলির জন্যও ম্যাপিং অন্তর্ভুক্ত রয়েছে।

বৈশিষ্ট্যগুলি আপনার বেসলাইন লক্ষ্য দ্বারা সমর্থিত কিনা তা জানুন

বেসলাইন তথ্য এখন বেশিরভাগ MDN এবং আমি কি ব্যবহার করতে পারি পৃষ্ঠাগুলিতে রয়েছে, এটি ওয়েব প্ল্যাটফর্ম ড্যাশবোর্ডে এবং web.dev এবং CSS ট্রিক্সের নিবন্ধগুলিতেও পাওয়া যাবে৷ যাইহোক, এই সবের জন্য আপনাকে সমর্থন সন্ধান করতে হবে। আপনার কোড হিসাবে আপনার IDE-এ বেসলাইন তথ্য দেখানো অনেক বেশি উপযোগী হবে এবং আপনার ব্যবহার করা অন্যান্য সরঞ্জামগুলির অংশ হিসাবে।

আমরা আপনার সাথে ভাগ করে নিতে উত্তেজিত যে এখন অনেক মূল টুলে বেসলাইন সমর্থন বিল্ট ইন, বা সহজে একীভূত করা আছে।

browserslist-config-baseline

Babel এবং PostCSS এর মত অনেক টুল কোন ব্রাউজার সমর্থন করবে তা নির্ধারণ করতে ব্রাউজারলিস্ট ব্যবহার করে।

WebDX CG এবং সম্প্রদায়ের সদস্যদের সাথে একসাথে, Chrome টিম browserslist-config-baseline নামে একটি নতুন টুল প্রকাশ করতে সাহায্য করেছে। এটি আপনাকে আপনার ব্রাউজার তালিকার লক্ষ্যগুলিকে বেসলাইন পদে কনফিগার করতে দেয় যেমন ব্যাপকভাবে উপলব্ধ বা বেসলাইন বছর।

এর সাহায্যে, ব্রাউজারলিস্ট টার্গেট নেওয়া যে কোনও টুল এখন বেসলাইনের পরিপ্রেক্ষিতে প্রকাশ করা যেতে পারে।

ব্রাউজারলিস্টের সাথে বেসলাইন ব্যবহার করুন -এ আরও জানুন।

লিন্টারে বেসলাইন—ESLint এবং Stylelint

লিন্টারের সাথে বেসলাইন ব্যবহার করা সম্প্রতি লিন্টার স্পেসে কিছু নতুন টুলের সাহায্যে সম্ভব হয়েছে, CSS-এর জন্য ESLint থেকে শুরু করে।

বেসলাইন ESLint এর use-baseline নিয়ম আছে। আপনি এটিকে আপনার পছন্দের বেসলাইন টার্গেটে সেট করতে পারেন, এবং আপনার লক্ষ্যের চেয়ে নতুন কোনো বৈশিষ্ট্য ব্যবহার করার সময় এটি আপনাকে সতর্ক করবে। আপনি এই সতর্কতাগুলি কীভাবে সমাধান করবেন তা চয়ন করতে পারেন: হয় সেই বৈশিষ্ট্যটিকে আদিম দিয়ে প্রতিস্থাপন করে বা লিন্টার সতর্কতা দমন করে, যা একটি সম্পূর্ণ বৈধ সমাধান যখন আপনি জানেন যে আপনি একটি আধুনিক বৈশিষ্ট্য নিরাপদে ব্যবহার করছেন, উদাহরণস্বরূপ যদি এটি একটি প্রগতিশীল বর্ধন।

ডিফল্টরূপে, যদি নতুন বৈশিষ্ট্যগুলি @supports ব্লকের মধ্যে ব্যবহার করা হয় তাহলে ESLint সতর্ক করবে না, যেহেতু অসমর্থিত ব্রাউজারগুলি তাদের মূল্যায়ন করবে না।

আপনার HTML linting প্রয়োজনের জন্য, html-eslint নামে একটি কমিউনিটি প্লাগইনও রয়েছে।

Stylelint আনুষ্ঠানিকভাবে stylelint-plugin-use-baseline নামে একটি প্লাগইন সমর্থন করে। এই নিয়মটি CSS-এর জন্য ESLint নিয়মের মতোই আচরণ করে, কিন্তু এটি পরিবর্তে Stylelint-এ চলে।

অনেক লিন্টারে IDE প্লাগইনও থাকে, তাই আপনি স্কুইগ্লি আন্ডারলাইনের মাধ্যমে কোডিং করার সময় বেসলাইন স্ট্যাটাস সম্পর্কে তাৎক্ষণিক প্রতিক্রিয়া পেতে পারেন।

VS কোড এবং JetBrains ওয়েবস্টর্মের বেসলাইন

অনেক IDE দীর্ঘ সময় ধরে আপনার সম্পাদকের একটি বৈশিষ্ট্যের উপর হভার করার এবং সমর্থিত ব্রাউজার সংস্করণগুলির তালিকা দেখতে একটি উপায় সমর্থন করেছে৷

কিন্তু সেই বৈশিষ্ট্যটি ব্যবহার করা আসলেই নিরাপদ কিনা তা বোঝা বেশ কঠিন হতে পারে—আপনাকে মানসিকভাবে বিশ্লেষণ করতে হবে যে সেই তালিকা থেকে কোন বড় ব্রাউজার নেই এবং সেই ব্রাউজার সংস্করণটি কতটা নতুন।

সেই সমস্যাটি সমাধান করার জন্য, আমরা এই হোভারকার্ডগুলিতে সরাসরি বেসলাইন ডেটা একীভূত করতে লক্ষ লক্ষ ওয়েব ডেভেলপার VS কোড দ্বারা ব্যবহৃত সবচেয়ে জনপ্রিয় IDE-এর সাথে অংশীদারিত্ব করেছি৷

আপনি এখন একটি বৈশিষ্ট্যের উপর হোভার করতে পারেন এবং এটি আপনাকে বলে দেবে যে বৈশিষ্ট্যটি বেসলাইন হিসাবে বিবেচিত হবে কিনা এবং কতক্ষণের জন্য, বা এমন কোনও বড় ব্রাউজার আছে যা এখনও এটি সম্পূর্ণরূপে প্রয়োগ করে না।

সমর্থিত বৈশিষ্ট্যগুলির মধ্যে রয়েছে CSS বৈশিষ্ট্য, HTML উপাদান এবং HTML বৈশিষ্ট্য। ভিজ্যুয়াল স্টুডিও কোডে আরও জানুন এখন বেসলাইন সমর্থন করে ।

এই ইন্টিগ্রেশন মানে VS কোডের উপর ভিত্তি করে যেকোন IDE-গুলিও এই হোভারকার্ডগুলি থেকে উপকৃত হবে৷

এবং, আমরা ঘোষণা করতেও সক্ষম যে JetBrains তাদের WebStorm JavaScript এবং TypeScript IDE-তে হোভারকার্ড প্রয়োগ করছে।

ওয়েব আগের চেয়ে দ্রুত উন্নতি করছে

আমরা আশা করি যে বেসলাইন আপনাকে এই সত্যের সুবিধা নিতে সাহায্য করবে যে ইন্টারঅপারেবল ওয়েব আগের চেয়ে দ্রুত উন্নতি করছে।

Google I/O 2024-এর পর থেকে গত বারো মাসে নতুনভাবে উপলব্ধ বেসলাইন হওয়া সমস্ত বৈশিষ্ট্য দেখতে আপনি ওয়েব প্ল্যাটফর্ম ড্যাশবোর্ড ব্যবহার করতে পারেন।

এছাড়াও অনেকগুলি বৈশিষ্ট্য রয়েছে যা আপনি আত্মবিশ্বাসী হতে পারেন যেগুলি খুব শীঘ্রই ইন্টারপ 2025 প্রকল্পে অন্তর্ভুক্ত হওয়ার সাথে সাথে বেসলাইন নতুনভাবে উপলব্ধ হবে৷ আপনি Interop2025-এ অন্তর্ভুক্ত সমস্ত বৈশিষ্ট্য সম্পর্কে পড়তে পারেন: ওয়েব প্ল্যাটফর্মের উন্নতির আরেকটি বছর ।

সাইডওয়ে লেখার মোড

আমরা ইতিমধ্যে একটি বৈশিষ্ট্য বেসলাইন নতুনভাবে উপলব্ধ হতে দেখেছি, সিএসএস writing-mode সম্পত্তির জন্য sideways-rl এবং sideways-lr মান। আপনি যদি লেআউটের উদ্দেশ্যে খাঁটিভাবে একটি উল্লম্ব লেখার মোড ব্যবহার করেন, তবে পার্শ্ববর্তী মানগুলি সম্ভবত পৌঁছাতে পারে।

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

অ্যাঙ্কর পজিশনিং

ক্রোম 125-এ অ্যাঙ্কর পজিশনিং পাঠানো হয়েছে৷ এটি আপনাকে একটি অ্যাঙ্করের সাথে একটি উপাদানের অবস্থান বেঁধে রাখার একটি উপায় দেয়, উদাহরণস্বরূপ একটি বোতাম দিয়ে একটি টুলটিপ খোলার সময়৷

এটি এখন ইন্টারপ 2025-এ অন্তর্ভুক্ত করা হয়েছে, তাই আমাদের এটিকে এই বছর বেসলাইনে যোগ দেওয়া উচিত।

মূল ওয়েব ভাইটাল: এলসিপি এবং আইএনপি

LCP API

ইভেন্ট টাইমিং API (INP-এর জন্য)

ওয়েব ভাইটাল আপনাকে আপনার সাইটের অভিজ্ঞতা পরিমাপ করতে এবং উন্নতি করার সুযোগগুলি চিহ্নিত করতে সাহায্য করতে পারে। ওয়েব ভাইটালস উদ্যোগের লক্ষ্য হল ল্যান্ডস্কেপকে সরল করা এবং সাইটগুলিকে সবচেয়ে গুরুত্বপূর্ণ মেট্রিক্সে ফোকাস করতে সাহায্য করা, কোর ওয়েব ভাইটাল।

ইন্টারপ 2025-এর মধ্যে রয়েছে Largest Contentful Paint (LCP) এবং ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) মেট্রিক্সের মাধ্যমে LargestContentfulPaint API এবং ইভেন্ট টাইমিং API ব্রাউজার জুড়ে।

<details> উপাদানের উন্নতি

<details> উপাদানটি ইতিমধ্যেই বেসলাইন ব্যাপকভাবে উপলব্ধ। এটিকে ইন্টারপ 2025-এ অন্তর্ভুক্ত করা হয়েছে কারণ অনেকগুলি বৈশিষ্ট্য রয়েছে যা <details> সহ ডিসক্লোজার উইজেটগুলিকে আরও উপযোগী করে তোলে৷

<details> উপাদানটিতে একটি <summary> উপাদান রয়েছে যা <details> উপাদানটি ভেঙে গেলে পৃষ্ঠায় দৃশ্যমান অংশ। <summary> এর বাইরে <details> উপাদানের বিষয়বস্তু, ব্যবহারকারী সারাংশে ক্লিক না করা পর্যন্ত এটি লুকানো থাকে।

ইন্টারপ 2025 এর সময় যে জিনিসগুলিকে ইন্টারঅপারেবল করা হচ্ছে তার মধ্যে একটি হল display পরিবর্তে content-visibility ব্যবহার করে বিষয়বস্তু লুকিয়ে রাখা, যার অর্থ প্রসারিত না হলে, সামগ্রীটি মোটেও রেন্ডার করা হবে না।

এছাড়াও ইন্টারপ 2025 কাজের অংশ হল ::marker সিউডো-এলিমেন্ট। ::marker ছদ্ম-উপাদান আপনাকে <summary> উপাদানের প্রকাশ ত্রিভুজকে স্টাইল করতে দেয়।

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

তারপর, আরেকটি ছদ্ম-উপাদান— ::details-content ।

::details-content বিষয়বস্তুকে প্রতিনিধিত্ব করে—বিশদ উপাদানের অংশ যা প্রসারিত হয় এবং ভেঙে পড়ে এবং আপনাকে এটিকে স্টাইল করতে দেয়।

[open]::details-content {
  border: 5px dashed hotpink;
}

এছাড়াও কিছু চমৎকার উন্নতি আছে যেমন <details> উপাদানটিকে ফাইন্ড-ইন-পেজ মিলের সাথে স্বয়ংক্রিয়ভাবে প্রসারিত করা এবং নতুনভাবে উপলব্ধ বেসলাইনে এইচটিএমএল hidden বৈশিষ্ট্যের until-found তার মান আনা। ব্রাউজারের ফাইন্ড-ইন-পৃষ্ঠা অনুসন্ধান ব্যবহার করে এটি পাওয়া না যাওয়া পর্যন্ত এটি একটি উপাদানকে লুকিয়ে রাখে বা এটি একটি URL খণ্ড অনুসরণ করে সরাসরি নেভিগেট করা হয়।

CSS @scope

CSS @scope নিয়ম আপনাকে আপনার নির্বাচকদের নাগাল সীমিত করতে দেয়। @scope এর সাথে একটি স্কোপিং রুট সেট করার মাধ্যমে, at-rule-এর ভিতরে থাকা যেকোন শৈলী নিয়ম শুধুমাত্র সেই DOM ট্রিতে প্রযোজ্য।

উদাহরণ স্বরূপ, আপনি যদি শুধুমাত্র <img> এলিমেন্টের ভিতরে .card এর ক্লাস সহ টার্গেট করতে চান, তাহলে .card স্কোপিং রুট হয়ে যাবে।

@scope (.card) {
    img {
        border-color: green;
    }
}

CSS @scope at-rule দিয়ে আপনার নির্বাচকদের নাগালের সীমাবদ্ধতায় আরও জানুন।

scrollend

আরেকটি বৈশিষ্ট্য যা জটিলতা কমায় এবং স্ক্রলিং ইন্টারফেস উন্নত করে তা হল scrollend । scrollend ইভেন্ট ছাড়া, একটি স্ক্রল সম্পূর্ণ হয়েছে তা সনাক্ত করার কোন নির্ভরযোগ্য উপায় নেই।

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

scrollend ইভেন্টের সাথে, ব্রাউজার আপনার জন্য এই সমস্ত কঠিন মূল্যায়ন করে।

document.onscrollend = event => {…}

স্ক্রলেন্ডে আরও উদাহরণ দেখুন, একটি নতুন জাভাস্ক্রিপ্ট ইভেন্ট ।

একই-ডকুমেন্ট ভিউ ট্রানজিশন

শেষ কিন্তু নিশ্চিতভাবে কম নয়, ভিউ ট্রানজিশনগুলি ইন্টারপ 2025-এর অংশ। এই কাজে একই-ডকুমেন্ট ভিউ ট্রানজিশন জড়িত, তাই সেগুলি একক-পৃষ্ঠা-অ্যাপগুলির জন্য এবং ট্রানজিশন ক্লাসগুলিও দেখুন।

বছরের অগ্রগতির সাথে প্রকল্পটি কীভাবে রূপ নিচ্ছে তা দেখতে Interop 2025 ড্যাশবোর্ডে অনুসরণ করুন৷

ইন্টারপ 2025-এ অন্তর্ভুক্ত বৈশিষ্ট্যগুলিই এই বছরের বেসলাইনের অংশ হয়ে উঠবে এমন নয়, তবে প্রকল্পগুলিতে তাদের অন্তর্ভুক্তি আমাদের একটি সুন্দর লক্ষণ দেয় যে সেগুলিকে অগ্রাধিকার দেওয়া হয়েছে এবং শীঘ্রই আসছে৷

আমরা শুধু শুরু করছি

বেসলাইনের জন্য এটি একটি উত্তেজনাপূর্ণ বছর, এবং আমরা গত বছর আমাদের ঘোষণাগুলি থেকে অনেক দূর এগিয়েছি। আমরা এখন এমন একটি অবস্থানে আছি যেখানে ওয়েব বৈশিষ্ট্য ডেটার ব্যাকফিলিং সম্পূর্ণ হয়েছে৷ এটি ফ্লাডগেটগুলি খুলে দিয়েছে এবং বিকাশকারী সরঞ্জামগুলি তৈরি করার অনুমতি দিয়েছে৷ আমরা সত্যিই এখানে শুরু করছি, এবং যদি আপনার কাছে একটি পণ্য বা ওপেন সোর্স টুল থাকে যা এই ডেটা অন্তর্ভুক্ত করে উপকৃত হবে, আমরা আপনার কাছ থেকে শুনতে চাই।

web.dev- এ চোখ রাখুন কারণ আমরা ওয়েবের অফার করা সমস্ত কিছুর সুবিধা নিতে আপনাকে সাহায্য করার জন্য টিউটোরিয়াল সহ নতুন টুলস সম্পর্কে ঘোষণা প্রকাশ করা চালিয়ে যাব৷